import React from "react"
import { List, InputItem, WhiteSpace,Button,Toast} from 'antd-mobile';
import {login} from "./api/index"
import {withRouter} from "react-router-dom"
@withRouter
class Login extends React.Component{
    constructor(){
        super()
        this.state={
            User:'',
            password:'',
            uid:''
        }
    }
    componentDidUpdate(){
        document.addEventListener('keydown',this.onkeydown)
    }
    onkeydown=(e)=>{
        if(e.keyCode===13){
            this.Login()
        }
    }
    // successToast() {
    //     Toast.success('Load success !!!', 1);
    // }
    Login(){
        
        if(this.state.User&&this.state.password){
            login(this.state.User,this.state.password)
            .then(body=>body.json())
            .then(res=>{
                if(res.code===200){
                    this.setState({
                        uid:res.profile.userId
                    })
                    Toast.success('Load success !!!', 1);
                    localStorage.setItem('uId',this.state.uid)
                    this.props.history.push('/discover')
                }else{
                    Toast.fail('账号密码错误', 1);
                }
                
            })
            
        }else{
            Toast.fail('账号密码不能为空', 1);
        }
        
    }
    handleGetUserValue=(event)=>{
        this.setState({
            User:event
        })
    }
    
    handleGetPasswordValue=(event)=>{
        this.setState({
            password:event
        })
    }
    render(){
        
        return(
            <div>
            <img src={require('./img/网易云.png')} alt=""/>
            <List>
                <InputItem
                onChange={this.handleGetUserValue.bind(this)}
            >手机号码</InputItem>
            <InputItem
                
                type="password"
                onChange={this.handleGetPasswordValue.bind(this)}
            >密码</InputItem>
            </List>
            <Button onClick={this.Login.bind(this) }>登录</Button>
            </div>
        )
        
    }
}

export default Login